extends layout

block content
	.select-room-container.box-container.clearfix
		.inner-padding.clearfix
			img.logo(src='/img/logo.png', width='217', height='239', alt='Logo')
			.clear
			.rooms-block
				h4 Select a room:
				.room-list.hide-inactive
					each room,index in rooms
						- var roomClass = room.online > 0 ? "room-active" : "room-inactive";
						- var word = room.online == 1 ? "user" : "users";
						a(href='/' + room.key, class="#{roomClass}", title="#{room.name}")
							| #{room.name.substr(0,20)}
							span.users-online
								| #{room.online} #{word}
				.inactive
					input(type='checkbox', id="hide-inactive", checked) 
					label(for="hide-inactive") Hide inactive
			.create-room-block
				h4
					em or
					| Create a new one:
				form(method="POST",action="/create")
					p
						input.text-grey(type='text', name='room_name', value='', placeholder='Name of your room')
					input.button(type='submit', value='Create now')



	footer
		| Balloons.IO is an 
		a(href='https://github.com/gravityonmars/Balloons.IO', target="_blank") Open Source project 
		| developed by 
		a(href='http://twitter.com/gravityonmars', target="_blank") Gravity On Mars.
	script.
		$('#hide-inactive').click(function(ev) {
			$('.room-list').toggleClass('hide-inactive');
		});
